<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <!-- 组件插槽作用：父组件通过插槽向子组件传递内容 ; 
         插槽的位置在子组件中；
         插值内容在组件标签中间-->
    <div id="app">
        <child-component>父组件通过插槽向子组件传递内容</child-component>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        Vue.component('child-component', {
            template: `<div>
                <div>子组件</div>
                <slot></slot>
            </div> `
        })
        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>